<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib uri="/WEB-INF/config/c.tld" prefix="c" %>
<%@ taglib prefix="fn" uri="/WEB-INF/config/fn.tld" %>
<%@ taglib prefix="fmt" uri="/WEB-INF/config/fmt.tld" %>
<!DOCTYPE html>
<html>
<head>
    <title>
        首页
    </title>
    <style>
        ul {
            margin: 0;
            padding: 0;

        }

        .clearfloat {
            zoom: 1;
        }

        .clearfloat::after {
            display: block;
            clear: both;
            content: "";
            visibility: hidden;
            height: 0;
        }

        .tab-list {
            overflow: hidden;
            position: relative;
            border-radius: 1%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        .tab-list .tab-itom {
            /*float: left;*/
            list-style: none;
            /*margin-right: 4px;*/
            width: 100%;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .tab-itom .test-label {
            /*position: relative;*/
            /*display: block;*/
            /*width: 119px;*/
            /*height: 35px;*/
            /*border: 1px solid transparent;*/
            /*line-height: 35px;*/
            /*text-align: center;*/
            position: relative; /* 确保其为 relative */
            display: block;
            width: 100%; /* 设置为100%宽度 */
            height: 35px;
            border: 1px solid transparent;
            line-height: 35px;
        }

        .more-content-link {
            position: absolute; /* 使用绝对定位 */
            right: 34px;
            top: 57%;
            transform: translateY(-50%); /* 与 top 属性结合使用以垂直居中 */
            font-size: 12px;
            color: #B0B0B0;
            text-decoration: none;

        }

        .tab-itom .tab-box {
            /* 设置绝对定位方便定位相对于tab-list栏的位置，同时为了可以使用z-index属性 */
            /*position: absolute;*/
            left: 0;
            top: 33px;
            /*width: 374px;*/
            height: 450px;
            /*border: 1px solid #cbcccc;*/
            border-radius: 5px;
            border-top-left-radius: 0px;
            background: #fff;
            /* 设置层级最低方便选中状态遮挡 */
            z-index: 0;
            padding-top: 10px;
            border-top: 1px solid #DBDBDB;
        }

        .tab-box > div {
            border-bottom: 1px dashed #DBDBDB; /* 使用dashed属性来创建虚线分隔线 */
            padding-bottom: 5px; /* 加点内边距使分隔线看起来更好 */
            margin-bottom: 5px; /* 加点外边距使分隔线看起来更好 */
        }

        /* 用绝对定位使按钮脱离文档流，透明度设置为0将其隐藏 */
        .tab-list input[type="radio"] {
            position: absolute;
            opacity: 0;
        }

        /* 利用选择器实现  tab切换 */
        /*.tab-list .tab-itom input[type="radio"]:checked + .test-label {*/
        /*	border-bottom: 2px solid #07863F; !* 选用的绿色代码 *!*/
        /*	display: inline-block; !* 以确保边框正确展现 *!*/
        /*}*/


        .tab-list .tab-itom input[type="radio"]:checked + .test-label .news-title {
            border-bottom: 2px solid #07863F; /* 选用的绿色代码 */
            display: inline-block; /* 以确保边框正确展现 */
        }

        /* 当radio为选中状态时设置它的test-label兄弟元素的属性 */
        .tab-list input[type="radio"]:checked + .test-label {
            /* 为了修饰存在的边框背景属性 */
            /*border-color: #cbcccc;*/
            border-bottom-color: #fff;
            background: #fff;
            /* 为了修饰存在的层级使下边框遮挡下方div的上边框 */
            z-index: 10;
        }

        /* 当radio为选中状态时设置与它同级的tab-box元素的显示层级 */
        .tab-list input[type="radio"]:checked ~ .tab-box {
            /* 选中时提升层级，遮挡其他tab页达到选中切换的效果 */
            z-index: 5;
        }

        .tab-box > div {
            position: relative; /* 为了让伪元素相对于这个 div 定位 */
            padding-left: 20px; /* 给圆点留出空间 */
        }

        .tab-box > div::before {
            content: "\2022"; /* 这是一个圆点字符 */
            color: #000; /* 设置圆点的颜色 */
            font-weight: bold; /* 使圆点更粗 */
            position: absolute; /* 绝对定位 */
            left: 10px; /* 定位到 div 的最左边 */
            top: 38%; /* 定位到 div 的垂直中间 */
            transform: translateY(-50%); /* 用于垂直居中圆点 */
        }


        .flexslider {
            margin: 0px auto 20px;
            position: relative;
            width: 100%;
            height: 482px;
            overflow: hidden;
            zoom: 1;
        }

        .flexslider .slides li {
            width: 100%;
            height: 100%;
        }

        .flex-direction-nav a {
            width: 70px;
            height: 70px;
            line-height: 99em;
            overflow: hidden;
            margin: -35px 0 0;
            display: block;
            background: url(images/ad_ctr.png) no-repeat;
            position: absolute;
            top: 50%;
            z-index: 10;
            cursor: pointer;
            opacity: 0;
            filter: alpha(opacity=0);
            -webkit-transition: all .3s ease;
            border-radius: 35px;
        }

        .flex-direction-nav .flex-next {
            background-position: 0 -70px;
            right: 0;
        }

        .flex-direction-nav .flex-prev {
            left: 0;
        }

        .flexslider:hover .flex-next {
            opacity: 0.8;
            filter: alpha(opacity=25);
        }

        .flexslider:hover .flex-prev {
            opacity: 0.8;
            filter: alpha(opacity=25);
        }

        .flexslider:hover .flex-next:hover,
        .flexslider:hover .flex-prev:hover {
            opacity: 1;
            filter: alpha(opacity=50);
        }

        .flex-control-nav {
            width: 100%;
            position: absolute;
            bottom: 10px;
            text-align: center;
        }

        .flex-control-nav li {
            margin: 0 2px;
            display: inline-block;
            zoom: 1;
            *display: inline;
        }

        .flex-control-paging li a {
            background: url(images/dot.png) no-repeat 0 -16px;
            display: block;
            height: 16px;
            overflow: hidden;
            text-indent: -99em;
            width: 16px;
            cursor: pointer;
        }

        .flex-control-paging li a.flex-active,
        .flex-control-paging li.active a {
            background-position: 0 0;
        }

        .flexslider .slides a img {
            width: 100%;
            height: 482px;
            display: block;
        }


    </style>


</head>

<body>
<div class="featured container" style="display: none;margin-top: 20px;">
    <div class="row">
        <div class="col-sm-12">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                    <c:forEach items="${bannerList }" var="banner" varStatus="index">
                        <div class="item <c:if test="${index.index==0 }">active</c:if>">
                            <a href="${banner.url}"> <img src="${banner.image }" alt="First slide"></a>
                        </div>
                    </c:forEach>
                </div>
                <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                    <span class=" glyphicon-chevron-left"><img src="images/zuo.png"/></span>
                </a>
                <a class="right" href="#carousel-example-generic" data-slide="next">
                    <span class=" glyphicon-chevron-right"
                          style="top:10px;position: absolute;top: 42%;right:20px;font-size: 30px;color: #fff"><img
                            src="images/you.png"/></span>
                </a>

            </div><!-- /carousel -->
        </div>
    </div>
</div>
<div id="page-content" class="index-page container">
    <!-- 第一行 -->
    <div class="row">
        <div class="col-md-6">

            <div id="banner_tabs" class="flexslider">
                <ul class="slides">
                    <c:forEach items="${bannertwo }" var="bannertwos" varStatus="index">
                        <li>
                            <div class="item <c:if test="${index.index==0 }">active</c:if>">
                                <a href="${bannertwos.url}"><img src="${bannertwos.image }" alt="First slide"></a>
                            </div>
                        </li>
                    </c:forEach>
                </ul>
                <ul class="flex-direction-nav">
                    <li><a class="flex-prev" href="javascript:;">Previous</a></li>
                    <li><a class="flex-next" href="javascript:;">Next</a></li>
                </ul>
                <%--<ol id="bannerCtrl" class="flex-control-nav flex-control-paging">
                    <li><a>2</a></li>
                    <li><a>2</a></li>
                </ol>--%>
            </div>


            <%--<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
					<!-- Wrapper for slides -->
					<div class="carousel-inner">
						<c:forEach items="${bannertwo }" var="bannertwos" varStatus="index">
							<div class="item <c:if test="${index.index==0 }">active</c:if>">
								<a href="${bannertwos.url}">	<img src="${bannertwos.image }" alt="First slide"></a>
							</div>
						</c:forEach>
					</div>
				<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
					<span class="glyphicon glyphicon-chevron-left"><</span>
				</a>
				<a class="right" href="#carousel-example-generic" data-slide="next">
					<span class="glyphicon glyphicon-chevron-right" style="top:10px;position: absolute;top: 42%;right:20px;font-size: 30px;color: #fff">></span>
				</a>
				</div>--%><!-- /carousel -->
            <!-- <img src="images/AIwBCAAQAhgAIIP__dcFKJnpiLQFMIAPOIAK!800x800.jpg" width="100%"> -->


        </div>
        <div class="col-md-6">
            <ul class="tab-list clearfloat yyy" style="background: #fff;">
                <li class="tab-itom">
                    <input type="radio" id="testTabRadio1" class="test-radio" name="tab" checked="checked">
                    <%--			            <label class="test-label" for="testTabRadio1"style="font-size:20px">新闻资讯</label>--%>
                    <%--						<label class="test-label" for="testTabRadio1" style="font-size:20px;color: #07863F;left: 15px;">--%>
                    <%--							<img src="images/news.png" alt="News Icon" style="vertical-align: middle; width: 24px; height: 24px;"> 新闻资讯--%>
                    <%--						</label>--%>
                    <label class="test-label" for="testTabRadio1">
                            <span class="news-title" style="font-size:20px;color: #07863F;margin-left: 10px;">
                                <img src="images/news.png" alt="News Icon"
                                     style="vertical-align: middle; width: 24px; height: 24px;"> 新闻资讯
                            </span>
                        <a href="info/list/1.html" class="more-content-link">更多内容</a>
                    </label>

                    <div class="tab-box">
                        <c:forEach items="${newList }" var="data">
                            <div style="height: 35px;">
                                <div class="col-md-8">
                                    <a href="info/view/${data.id}.html">
                                        <c:set var="testStr" value="${data.cnName}"/>
                                        <c:choose>
                                            <c:when test="${fn:length(testStr) > 20}">
                                                <c:out value="${fn:substring(testStr, 0, 20)}..."/>
                                            </c:when>
                                            <c:otherwise>
                                                <c:out value="${testStr}"/>
                                            </c:otherwise>
                                        </c:choose>
                                    </a>
                                </div>
                                <div class="col-md-4">
                                    <a href="info/view/${data.id}.html"
                                       style="color: #B0B0B0;  float: right;  margin-right: 30px;">
                                        <fmt:formatDate value="${data.createDate}" pattern="yyyy-MM-dd"/>
                                    </a>
                                </div>
                            </div>
                        </c:forEach>
                        <%--							<a href="info/list/1.html" style="float: right;position: absolute;top: 420px;margin-right: 20px"><input type="button" style="width: 365px" value="显示更多"></a>--%>
                    </div>
                </li>
                <%--<li class="tab-itom">
                    <input type="radio" id="testTabRadio2" class="test-radio" name="tab">
                    <label class="test-label" for="testTabRadio2"style="font-size:20px">政策解读</label>
                    <div class="tab-box">

                          <c:forEach items="${jieduList }" var="data">
                              <div style="height: 35px;">
                                <div class="col-md-8">
                                    <a href="info/view/${data.id}.html">
                                        <c:set var="testStr" value="${data.cnName}"/>
                                        <c:choose>
                                            <c:when test="${fn:length(testStr) > 12}">
                                                <c:out value="${fn:substring(testStr, 0, 12)}..." />
                                             </c:when>
                                             <c:otherwise>
                                                <c:out value="${testStr}" />
                                             </c:otherwise>
                                        </c:choose>
                                    </a>
                                </div>

                                <div class="col-md-4">
                                    <a href="info/view/${data.id}.html">
                                        <fmt:formatDate value="${data.createDate}"  pattern="yyyy-MM-dd" />
                                    </a>
                                </div>
                            </div>

                        </c:forEach>
                        <a href="info/list/2.html" style="float: right;position: absolute;top: 420px;margin-right: 20px"><input type="button" style="width: 365px" value="显示更多"></a>
                    </div>

                </li>
                <li class="tab-itom">
                    <input type="radio" id="testTabRadio3" class="test-radio" name="tab">
                    <label class="test-label" for="testTabRadio3"style="font-size:20px">通知公告</label>
                    <div class="tab-box">
                        <c:forEach items="${gonggaoList }" var="data">
                              <div style="height: 35px;">
                                <div class="col-md-8">
                                    <a href="info/view/${data.id}.html">
                                        <c:set var="testStr" value="${data.cnName}"/>
                                        <c:choose>
                                            <c:when test="${fn:length(testStr) > 12}">
                                                <c:out value="${fn:substring(testStr, 0, 12)}..." />
                                             </c:when>
                                             <c:otherwise>
                                                <c:out value="${testStr}" />
                                             </c:otherwise>
                                        </c:choose>
                                    </a>
                                </div>
                                <div class="col-md-4">
                                    <a href="info/view/${data.id}.html">
                                        <fmt:formatDate value="${data.createDate}"  pattern="yyyy-MM-dd" />
                                    </a>
                                </div>
                            </div>
                        </c:forEach>
                        <a href="info/list/3.html" style="float: right;position: absolute;top: 420px;margin-right: 20px"><input type="button" style="width: 365px" value="显示更多"></a>
                    </div>
                </li>--%>
            </ul>
        </div>
    </div>
    <!-- /第一行 -->
    <div style="margin-top: 20px;margin-bottom: 80px;">
        <c:forEach items="${brand}" var="brands" varStatus="index">
            <div class="item <c:if test="${index.index==0 }">active</c:if>">
                <a href="${brands.url }" class="more-a-css-3">
                    <img src="${brands.image }" alt="First slide">
                </a>
            </div>
        </c:forEach>
    </div>
    <!-- 第二行 -->
    <div class="row" style="margin-top: 170px;">
        <div class="col-md-6">
            <iframe src="index/other.html" width="100%" height="600px" frameborder="no" scrolling="no"
                    style="border-radius: 1%;"></iframe>
        </div>
        <div class="col-md-6" style="background-color: #fff;border-radius: 1%;">
            <div class="pageTit">
                <div class="dian"></div>
                <div class="xiax">品种推介</div>
            </div>
            <c:forEach items="${brandList}" var="brand">
                <div class="col-md-6" style="margin-top: 10px;">
                    <a href="brandActivity/view/${brand.id}.html">
                        <div class="zoom-container">
                            <img src="${brand.image}"/>
                        </div>
                    </a>
                    <br/>

                    <a href="brandActivity/view/${brand.id}.html">
                            ${fn:substring(brand.cnName,0,15)}...
                    </a>
                </div>
            </c:forEach>

            <a href="brandActivity/ret.html" style="position: absolute;top: 570px;left: 28px;"><input type="button"
                                                                                                      style="width: 540px;"
                                                                                                      value="显示更多"></a>
        </div>
    </div>
    <!-- /第二行 -->
</div>
<br/>
<!-- Header -->
<!-- JS -->
<script src="owl-carousel/owl.carousel.js"></script>
<script>
    $(document).ready(function () {
        $("#owl-demo").owlCarousel({
            autoPlay: 3000,
            items: 5,
            itemsDesktop: [1199, 4],
            itemsDesktopSmall: [979, 4]
        });
        $(".featured ,.container").show();
    });


</script>


<script type="text/javascript" src="js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>

<script type="text/javascript" src="js/slider.js" charset="UTF-8"></script>

<script type="text/javascript">
    $(function ($) {
        $.fn.datetimepicker.dates['zh-CN'] = {
            days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
            daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
            daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
            months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            today: "今日",

            suffix: [],
            meridiem: ["am", "pm"],
            weekStart: 1,

        };
    }(jQuery));
    $('.form_date').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    });
    //DATE PICKER
    $('.form_date').datetimepicker().on('changeDate', function (event) {
        //alert(event.date)
    })
</script>

<script type="text/javascript">
    $(function () {
        var bannerSlider = new Slider($('#banner_tabs'), {
            time: 5000,
            delay: 400,
            event: 'hover',
            auto: true,
            mode: 'fade',
            controller: $('#bannerCtrl'),
            activeControllerCls: 'active'
        });
        $('#banner_tabs .flex-prev').click(function () {
            bannerSlider.prev()
        });
        $('#banner_tabs .flex-next').click(function () {
            bannerSlider.next()
        });
    })
</script>
</body>
</html>
